<template>
    <div v-if="address" class="address ui-box ui-c-f post" @click="selectAddress">
        <div class="edit-address"></div>
        <h1>{{address.receiver_name}}</h1>

        <h2>{{address.phone}}</h2>

        <p>{{address.city|parseCity}} {{address.place}}</p>
    </div>
    <div v-else="" class="ui-box">
        <div class="ui-bar ui-v-a post" @click="selectAddress">
            新增收货地址
            <div class="ui-more"></div>
        </div>
    </div>

    <div v-if="skus" class="ui-box">
        <div v-for="val of skus" class="product">

            <img :src="val.pic+'?imageView2/1/w/200/h/200'">

            <div class="tumb-top ui-c-f">
                <div class="thum-price">
                    <div class="ui-price price-red">{{val.price/10}}</div>
                    <div v-if="val.price_cost>0" class="ui-price price-gray">{{val.price_cost/10}}</div>
                </div>
                <h1>
                    {{val.title}}
                </h1>
            </div>
            <div class="quantity">{{val.quantity}}</div>
        </div>
    </div>

    <div class="ui-box">
        <div class="ui-bar ui-v-a" @click="selectCoupon">
            优惠券
            <div class="float-right coupon">
                <div class="ui-more">{{couponTitle}}</div>
            </div>
        </div>
    </div>

    <div class="ui-box">
        <div class="ui-bar ui-v-a">
            商品总价
            <div class="float-right">
                <div class="ui-price">{{amount/10}}</div>
            </div>
        </div>
        <div v-if="postage.lack" class="ui-bar ui-v-a">
            邮费<span class="lack">(还差<b>{{postage.lack/10}}元</b>包邮)</span>

            <div class="float-right">
                <div class="ui-price">{{postage.cost/10}}</div>
            </div>
        </div>
        <div v-else class="ui-bar ui-v-a">
            邮费<span class="lack"><b>(已包邮)</b></span>

            <div class="float-right">
                <div class="ui-price">{{postage.cost/10}}</div>
            </div>
        </div>
        <div class="ui-bar ui-v-a">
            为您节省
            <div class="float-right">
                <div class="ui-price">{{discount/10}}</div>
            </div>
        </div>
    </div>

    <div class="ui-box remark">
        <textarea placeholder="想给商家留点什么备注？(选填)" v-model="remark"></textarea>
    </div>

    <div class="ui-page-holder">
    </div>

    <cashier v-if="pay" :bill_id="bill_id" :order_id="order_id" @start="pay=false"></cashier>

    <footer class="ui-c-f">
        <div v-if="discount" class="discount">
            已节省{{discount/10}}元
        </div>

        <button :class="['ui-btn-yellow', 'ui-v-a']" @click="clickfb"><span>去结算</span></button>
        <div class="amountArea ui-v-a">
            <div>
                <div>合计
                    <div class="ui-price price ui-v-a"><span>{{needPay/10}}</span></div>
                </div>
                <div v-if="postage.lack" class="free-remain">
                    还差<b>{{postage.lack/10}}元</b>包邮
                </div>
                <div v-else class="free-remain">
                    <b>已包邮</b>
                </div>
            </div>
        </div>
    </footer>
</template>

<script type="text/babel">
    import http from '../libs/http'
    import cashier from './cashier.vue'
    import {orderService } from '../stores/order'

    export default{
        components: {
            cashier: cashier
        },
        data(){
            return orderService.pure;
        },
        computed: {
            couponTitle: function () {
                if (this.coupon) {
                    var title = '';
                    if (this.coupon.range_type == 0)
                        title = '全场通用';
                    else {
                        this.coupon.range.forEach(function (range) {
                            title += range.name;
                        });

                        title += '专用';
                    }

                    if (this.coupon.type == 0)
                        title += this.coupon.zk / 10 + '折最高抵' + this.coupon.minus / 10;
                    else if (this.coupon.man > 0)
                        title += '满' + this.coupon.man + '抵' + this.coupon.minus / 10;
                    else
                        title += '抵' + this.coupon.minus / 10;

                    return title;
                } else
                    return '无';
            }
        },

        attached: function () {
            var self = this;

            try {
                var buySkus = JSON.parse(this.$route.params.skus);
                orderService.resume(buySkus);
            } catch (e) {
                alert('订单信息异常');
                history.back();
                return;
            }
        },
        methods: {
            selectAddress: function () {
                this.$route.router.go({
                    name: this.address ? 'selectAddress' : 'addAddress'
                });
            },

            selectCoupon: function () {
                this.$route.router.go({
                    name: 'selectCoupon'
                });
            },

            clickfb: function () {
                var self = this;

                if (!self.address) {
                    return self.$dispatch('toast', '请添加邮寄地址！');
                }

                var conditions = {
                    addressId: self.address._id,
                    skus: {}
                };

                self.skus.forEach(function (sku) {
                    conditions.skus[sku._id] = sku.quantity;
                });

                if (self.coupon)
                    conditions.couponId = self.coupon._id;

                if (self.remark)
                    conditions.remark = self.remark;


                http.post({
                            url: api + 'order',
                            jsonp: true,
                            data: conditions
                        })
                        .then(function (obj) {
                            if (obj.code == 0) {
                                self.order_id = obj.data.order_id;
                                self.bill_id = obj.data.bill_id;

                                self.pay = true;
                            } else if (obj.msg)
                                self.$dispatch('toast', obj.msg);
                        });

            }
        }
    }
</script>

<style scoped>
    .address {
        height: 90px;
        padding: 0 8px;
    }

    .address h1 {
        display: inline-block;
        font-size: 16px;
        font-weight: lighter;
        padding: 8px 0;
    }

    .address h2 {
        display: inline-block;
        font-size: 12px;
        font-weight: lighter;
    }

    .address h2::after {
        content: '';
        display: block;
    }

    .address p {
        font-size: 12px;
        color: #888888;
        margin-right: 60px;
        max-height: 3em;
        line-height: 1.5em;
    }

    .address .edit-address {
        width: 60px;
        position: absolute;
        height: 90px;
        right: 0;
        background: url(../../static/img/ic_edit.png) no-repeat center;
        background-size: 18px;
    }

    .product {
        width: 100%;
        height: 100px;
        padding: 8px 0;
        border-bottom: solid 1px #f0f0f0;
    }

    .product:last-child {
        border-bottom: none;
    }

    .product h1 {
        font-size: 13px;
        font-weight: lighter;
        width: 210px;
        margin-top: 8px;
        margin-left: 8px;
        float: left;
    }

    .product > img {
        margin-left: 8px;
        display: block;
        float: left;
        width: 100px;
        height: 100px;
    }

    .tumb-top {
        height: 70px;
    }

    .thum-price {
        position: relative;
        float: right;
        margin-right: 8px;
        margin-top: 8px;
        text-align: right;
    }

    .price-red {
        color: #ff0000;
        font-size: 14px;
        font-weight: normal;
    }

    .price-gray {
        color: #888888;
        text-decoration: line-through;
        font-size: 11px;
    }

    .quantity {
        color: #888888;
        float: right;
        margin-right: 8px;
        font-size: 12px;
    }

    .quantity::before {
        content: 'x';
        display: inline-block;
    }

    .ui-bar {
        font-size: 14px;
        border-bottom: solid 1px #f0f0f0;
    }

    .ui-bar:last-child {
        border-bottom: none;
    }

    .float-right {
        height: 100%;
        float: right;
    }

    .coupon {
        color: #888888;
    }

    .lack {
        font-size: 12px;
    }

    .lack b {
        color: red;
        font-weight: normal;
    }

    .post {
        background-image: url(../../static/img/post.png);
        background-repeat: repeat-x;
        background-size: 1px 1px;
    }

    .float-right .ui-price {
        color: red;
    }

    .remark {
        padding: 8px 16px;
    }

    .remark textarea {
        width: 100%;
        padding: 8px;
        right: 10px;
        border: solid 1px #f0f0f0;
        background: #fafafa;
        position: relative;
        height: 100px;
        display: block;
        resize: none;
    }

    footer .discount {
        line-height: 49px;
        padding: 0 8px;
        color: #f9e043;
        float: left;
        font-size: 12px;
    }

    footer .ui-btn-yellow {
        float: right;
        padding: 0;
        height: 34px;
        margin: 7px 5px;
    }

    footer .amountArea {
        color: white;
        text-align: right;
        font-size: 12px;
        float: right;
        height: 100%;
    }

    footer .amountArea > div {
        display: inline-block;
        vertical-align: middle;
    }

    footer .ui-price {
        color: #f9e043;
        display: inline-block;
    }

    footer .free-remain {
        font-size: 10px;
        color: #888888;
        font-weight: normal;
    }

    footer .free-remain b {
        color: #f9e043;
        padding: 0 3px;
        font-weight: normal;
    }

    footer .ui-btn-yellow.un {
        background: #dddddd;
        color: #888888;
    }
</style>